<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="customer_member_total_contact">
        <div class="header">
            <div class="back">返回</div>
            <div class="type_select_wrapper">成员客户统计</div>
        </div>
        <div class="container">
            <div class="title">成员客户统计</div>
            <div class="screen_wrapper">
                <div class="screen_item">
                    <span class="text">部门：</span>
                    <div class="department_select">全部</div>
                </div>
            </div>
            <div class="table_wrapper">
                <div class="exporting_and_total">
                    <a href="javascript:;" class="exporting_btn">导出记录</a>
                    <span class="total_num">共4人</span>
                </div>
                <table class="layui-table member_table">
                    <thead>
                        <tr>
                            <th>成员</th>
                            <th>客户总数</th>
                            <th>今日新增</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-id="LiuYiHua">
                            <td>刘毅华</td>
                            <td>2</td>
                            <td>0</td>
                        </tr>
                        <tr data-id="ZhaoHongRui">
                            <td>赵虹蕊</td>
                            <td>1</td>
                            <td>0</td>
                        </tr>
                        <tr data-id="LvHaiYang">
                            <td>吕海洋</td>
                            <td>2</td>
                            <td>0</td>
                        </tr>
                    </tbody>
                </table>
                <div class="paging_style" id="paging"></div>
            </div>
        </div>
    </div>

    <!-- 新增用户组织架构模态框 -->
    <div class="modal fade normal_modal" id="add_user_organizational_modal" tabindex="-1" role="dialog"
        aria-labelledby="add_user_organizational_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="add_user_organizational_modal_label">选择部门</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="add_user_protree_container"></div>
                        </div>
                        <div class="right_wrapper">
                            <div class="title">已选择部门</div>
                            <div class="selected">
                                <div class="department_members selected_department" id="add_user_selected_department">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="add_user_submit_dep_member">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增用户组织架构模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <script>
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }
        let nav_index = getUrlParam('nav_index'); // 拿到接收到的父级页面tab的index值
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true,
                Useful: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true,
                Useful: true
            },
            {
                id: 3,
                name: '君臣国度',
                pid: 2,
                department: true,
                Useful: true
            }
        ];
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer;

                // 返回
                $(".back").click(function () {
                    self.location.href = "customer.html?nav_index=" + nav_index
                })

                var add_user_depSelected = []; // 新增用户选择的组织架构
                //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
                $(".add_user_protree_container").ProTree({
                    arr: arr,
                    close: true,
                    simIcon: "iconfont icon-wenjianjia", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                    callback: function (id, name, pid, department, useful) {
                        let data = {
                            id,
                            name,
                            pid,
                            department,
                            useful
                        };
                        if (useful) {
                            let isAdd = true;
                            if (add_user_depSelected.length > 0) {
                                for (let i = 0; i < add_user_depSelected.length; i++) {
                                    if (add_user_depSelected[i].name == data.name) {
                                        isAdd = false
                                        layer.msg('已经选过此部门了')
                                        break
                                    }
                                }
                            }
                            if (isAdd) {
                                add_user_depSelected.push(data);
                                $("#add_user_selected_department").append(`
                        <div class="dep_item">
                            <i class="iconfont icon-wenjianjia"></i>
                            <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-useful="${data.useful}">${data.name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                            }
                        }

                    }
                });
                // 选择部门
                $(".department_select").click(function () {
                    $("#add_user_organizational_modal").modal('show')
                    let html1 = "";
                    for (let i = 0; i < add_user_depSelected.length; i++) {
                        html1 += `
                        <div class="dep_item">
                            <i class="iconfont icon-wenjianjia"></i>
                            <span data-id="${add_user_depSelected[i].id}" data-pid="${add_user_depSelected[i].pid}" data-dep="${add_user_depSelected[i].dep}" data-useful="${add_user_depSelected[i].useful}">${add_user_depSelected[i].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `;
                    }
                    $("#add_user_selected_department").html(html1);
                })
                // 删除部门
                $(".department_members").on("click", ".delete_dep_mem", function () {
                    let id = $(this)
                        .siblings("span")
                        .attr("data-id");
                    let dep = $(this)
                        .siblings("span")
                        .attr("data-dep");
                    $(this)
                        .parent()
                        .remove();
                    for (let i = 0; i < add_user_depSelected.length; i++) {
                        if (id == add_user_depSelected[i].id) {
                            add_user_depSelected.splice(i, 1);
                            break;
                        }
                    }
                });
                // 拿到需要发送的部门列表
                $("#add_user_submit_dep_member").click(function () {
                    totalDatalist = add_user_depSelected;
                    let dep_depart_select = ""
                    for (let i = 0; i < totalDatalist.length; i++) {
                        dep_depart_select += `${totalDatalist[i].name},`
                    }
                    dep_depart_select = dep_depart_select.substring(0, dep_depart_select.length - 1)
                    if (dep_depart_select == '') {
                        $(".department_select").text('全部')
                    } else {
                        $(".department_select").text(dep_depart_select)
                        $(".department_select").attr('title', dep_depart_select)
                    }
                    console.log('depSelected', totalDatalist) // 拿到选好的数据
                    // 执行ajax 加载table数据
                    $("#add_user_organizational_modal").modal("hide");
                });

                // 2020-02-19 start
                // 点击表格中的成员 跳转至成员详情
                $(".member_table").on('click', 'tbody tr', function() {
                    let member_id = $(this).attr('data-id'); // 拿到成员id
                    self.location.href = "customer-list.html?id=" + member_id + '&page=customer-member-total-contact&nav_index=' + nav_index // 将成员id传给详情页面
                })
                // 2020-02-19 end
            })
        })

    </script>
</body>

</html>